<template>
  <div>
    <table border="1" width="700" style="border-collapse: collapse">
      <caption>
        购物车
      </caption>
      <thead>
        <tr>
          <th><input type="checkbox" v-model="isAll" /> <span>全选</span></th>
          <th>名称</th>
          <th>价格</th>
          <th>数量</th>
          <th>总价</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in goodList" :key="index">
          <td><input type="checkbox" v-model="item.checked" /></td>
          <td>{{ item.name }}</td>
          <td>{{ item.price }}</td>
          <td>
            <button @click="item.num > 1 ? item.num-- : 1">-</button>
            {{ item.num }}
            <button @click="item.num++">+</button>
          </td>
          <td>{{ item.price * item.num }}</td>
          <td><button @click="delFn(index)">删除</button></td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>合计:</td>
          <td colspan="5">
            {{ allPrice }}
          </td>
        </tr>
      </tfoot>
    </table>
    <div class="box">
      <span>商品名称：</span><input type="text" v-model="shopName"/>
      <span>商品价格：</span><input type="text" v-model="shopPrice"/>
      <span>商品数量：</span><input type="text" v-model="shopNum"/>
      <div><button @click="AddShop">添加</button></div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      sum: 0,
      shopName:'',
      shopPrice:'',
      shopNum:''
    };
  },
  methods: {
    delFn(index) {
      this.goodList.splice(index, 1);
    },
    AddShop(){
      this.goodList.push({
        name:this.shopName,
        price:this.shopPrice,
        num:this.shopNum
      })
        this.shopName='',
        this.shopPrice='',
        this.shopNum=''
    }
  },
  computed: {
    ...mapState(["goodList"]),
    isAll: {
      set(val) {
        this.goodList.forEach((item) => (item.checked = val));
      },
      get() {
        return this.goodList.every((item) => item.checked === true);
      },
    },
    allPrice() {
      return this.goodList
        .reduce((sum, item) => {
          if (item.checked) {
            sum += item.num * item.price;
          }
          return sum;
        }, 0)
        .toFixed(2);
    },
  },
};
</script>

<style>
.box{
  margin-top: 10px;
}
.box input {
  width: 135px;
  margin-right: 17px;
}
.box div button{
  margin-top: 10px;
  width: 60px;
  height: 30px;
  font-size: 15px;
}
</style>